<template>
  <div class="changePassword">
    <a-form-model :model="form3" :wrapper-col="{span: 10,offset:4}" :rules="rules3"
                  ref="ruleForm3">
      <a-form-model-item label="" prop="phone">
        <a-input v-model="form3.phone" placeholder="请输入手机号码"/>
      </a-form-model-item>
      <a-form-model-item prop="imageCode">
        <div style="display: flex">
          <a-input v-model="form3.imageCode" placeholder="请输入图形验证码"/>
          <img :src="imgSrcChange" width="150" height="30" alt=""
               @click="refelshChangeImg">
        </div>
      </a-form-model-item>
      <a-form-model-item label="" prop="smsCode">
        <a-input v-model="form3.smsCode" placeholder="请输入短信验证码">
          <a slot="addonAfter" @click="getMessageNum" :disabled="disabled">
            {{sendText}}
          </a>
        </a-input>
      </a-form-model-item>
      <a-form-model-item label="" prop="oldPassword">
        <a-input v-model="form3.oldPassword" type="password" placeholder="请输入旧密码"/>
      </a-form-model-item>
      <a-form-model-item label="" prop="newPassword">
        <a-input v-model="form3.newPassword" type="password" placeholder="请输入新密码"/>
      </a-form-model-item>
      <a-form-model-item label="" prop="sureNewPassword">
        <a-input v-model="form3.sureNewPassword" type="password" placeholder="请再次输入新密码"/>
      </a-form-model-item>
      <a-form-model-item label="" style="text-align: center">
        <a-button class="sureBtn" @click="changePassWord('ruleForm3')">确定</a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
  import { changePassword, getChangePwdImage, sendSmsCode } from "../../serves";
  import { eventBus } from '@/eventBus'

  export default {
    name: "ChangePassWord",
    data() {
      const validatePhone = (rule, value, callback) => {
        let reg = /^1[0-9]{10}$/;
        if (value === '') {
          callback(new Error('请输入手机号码！'))
        } else if (!reg.test(value)) {
          callback(new Error('手机号码错误，请重新输入！'))
        } else {
          callback()
        }
      }
      const validatorPassWord3 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请二次输入新密码！'))
        } else if (value != this.form3.newPassword) {
          callback(new Error('两次输入的密码不一致，请重新输入！'))
        } else {
          callback()
        }
      }
      return {
        form3: {
          phone: '',
          imageCode: '',
          smsCode: '',
          oldPassword: '',
          newPassword: '',
          sureNewPassword: ''
        },
        rules3: {
          phone: [{
            required: true,
            validator: validatePhone,
            trigger: 'change'
          }],
          imageCode: [{
            required: true,
            message: '图形验证码不能为空！',
            trigger: 'change'
          }],
          smsCode: [{
            required: true,
            message: '短信验证码不能为空！',
            trigger: 'change'
          }],
          oldPassword: [{
            required: true,
            message: '请输入旧密码！',
            trigger: 'change'
          }],
          newPassword: [{
            required: true,
            message: '请输入新密码！',
            trigger: 'change'
          }],
          sureNewPassword: [{
            required: true,
            validator: validatorPassWord3,
            trigger: 'change'
          }]
        },
        imgSrcChange: '',
        sendText: '获取验证码',
        disabled: false,
        timer2: null
      }
    },
    mounted() {
      this.getChangePwdImageCode()
    },
    methods: {
      setTime(num) {
        if (num <= 1) {
          this.sendText = `重新发送`
          this.disabled = false
          clearTimeout(this.timer2)
          return false
        } else {
          this.disabled = true
          num--
        }
        this.sendText = `${num}s后重新发送`
        this.timer2 = setTimeout(() => {
          this.setTime(num)
        }, 1000)
      },
      getMessageNum() {
        if (!this.form3.phone) {
          this.$message.warning('手机号不能为空！')
          return
        }
        this.sendText = `60s后重新发送`
        this.disabled = true
        this.setTime(60)
        let params = {
          data: this.form3.phone
        }
        sendSmsCode(params).then(res => {
          if (res.status == 200 && res.data.status.code == 200) {
            this.$message.success('发送成功！')
          } else {
            this.$message.warning(res.data.message)
          }
        })
      },
      refelshChangeImg() {
        this.getChangePwdImageCode()
      },
      getChangePwdImageCode() {
        getChangePwdImage().then(res => {
          if (res.status == 200 && res.data.status.code == 200) {
            this.imgSrcChange = res.data.data
          } else {
            this.$message.warning(res.data.message)
          }
        })
      },
      changePassWord(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            let params = {
              phone: this.form3.phone,
              oldPassword: this.form3.oldPassword,
              smsCode: this.form3.smsCode,
              imageCode: this.form3.imageCode,
              newPassword: this.form3.newPassword,
            }
            changePassword(params).then(res => {
              if (res.status == 200 && res.data.status.code == 200) {
                this.$message.success('修改成功，请重新登录！')
              } else if (res.data.status.code == 450) {
                this.$message.warning(res.data.message)
                this.$router.push({
                  path: '/login'
                })
                eventBus.$emit('isShow', false);
              } else {
                this.$message.warning(res.data.message)
              }
            })
          }
        })
      },
    }
  }
</script>

<style scoped>

</style>
